<template>
	<view class="contain">
			<view class="userInfo">
				 <u-row align="top">
					<u-col span="2" justify="center" textAlign="center">
						<view><image :src="headimg" style="width:70rpx;height:70rpx;border-radius:100%;"></image></view>
					</u-col>
					<u-col span="7" justify="start" textAlign="left" align="center">
						<view class="uanme"><text class="text-sm text-gray-500">{{username}}</text></view>
						<view class="date text-sm text-gray-500" style="font-size:20rpx;">{{pldate}}</view>
					</u-col>
					<u-col span="3" justify="end" textAlign="right">
						<text class="text-sm text-gray-500">{{reply}} 回复</text>
					</u-col>
				</u-row>
			</view> <!-- userInfo End -->
			<view class="product flex justify-between items-center p-2 my-1 bg-pink-50">
				<view><image :src="productimg" style="width:100rpx;height:100rpx;border-radius:10rpx;"></image></view>
				<text class="text-sm ml-3">千丝椰子饼厦门小吃美味休闲零食小吃传统糕点馅饼原味 千丝厦门椰子饼300g</text>
			</view>
			<view class="my-2"><u-rate :gutter="0" :size="22" activeColor="#F5A623" readonly :count="starCount" v-model="starValue"></u-rate></view>
			<view class="replyContent">
				<text class="text-sm text-gray-700">非常不错的，之前一直在这家店购买零食，性价比还是挺高的，发现店家发货，速度也挺快的，总体来说还是比较不错的店铺，之后还会继续回购。</text>
			</view>
			<view class="replyimgs flex flex-col mt-2">
				<view class="my-1" v-for="item in replyimgs"><image :src="item" mode="widthFix"></image></view>
			</view>
			
			<!-- 回复按钮 -->
			<view class="w-full my-5"><u-button type="error" size="large" text="回复" @click="showReply=true"></u-button></view>
			<!-- 回复输入框 -->
			<view class="inputReply mb-3" v-if="showReply">
				<view><u--textarea v-model="ReplyContent" placeholder="请输入你的评论(150字内)" count maxlength="150"></u--textarea></view>
				<view class="ibtn w-full flex justify-between my-3">
					<view class="w-1/2 mr-1"><u-button type="default" :customStyle="btncustomstyle" :plain="true" size="large" text="取消" @click="showReply=false"></u-button></view>
					<view class="w-1/2 ml-1"><u-button type="primary" size="large" text="发表" @click="sendRely"></u-button></view>
				</view>
			</view>
			
			
			<!-- 回复内容 -->
			<view class="userInfo mb-5" v-for="item in replyArr">
				 <u-row align="top">
					<u-col span="2" justify="center" textAlign="center">
						<view><image :src="item.headimg" style="width:70rpx;height:70rpx;border-radius:100%;"></image></view>
					</u-col>
					<u-col span="7" justify="start" textAlign="left" align="center">
						<view class="uanme"><text class="text-sm text-gray-500">{{item.username}}</text></view>
						<view class="date text-sm text-gray-500" style="font-size:20rpx;">{{item.date}}</view>
					</u-col>
					<u-col span="3" justify="end" textAlign="right">
						<text class="text-sm text-gray-500">回复</text>
					</u-col>
				</u-row>
				 <u-row align="top">
					 <u-col span="12" justify="start" textAlign="left">
						 <text class="my-1 text-gray-700 text-sm ml-2">{{item.replyText}}</text>
					 </u-col>
				 </u-row>
			</view> <!-- userInfo End -->
	</view>
</template>

<script setup lang='ts'>
	import { ref,reactive } from 'vue'
	let headimg=ref("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F21%2F20200521143558_mdhsk.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702994421&t=4c6d4b56ef93f56a2dab1164e2141636");
	let username=ref("小***美");
	let pldate=ref("2023-10-11");
	let productimg=ref("https://img13.360buyimg.com/n1/jfs/t1/75605/23/24807/101847/64489322F2d4851b5/08e043052c7ba051.jpg.avif");
	let starCount=ref(5);
	let starValue=ref(5);
	let showReply=ref(false);
	let reply=ref(0);
	let btncustomstyle=reactive<Object>({
		"border":"1px solid #ccc"
	});
	let replyimgs=reactive<string[]>([
		"https://img13.360buyimg.com/n1/jfs/t1/75605/23/24807/101847/64489322F2d4851b5/08e043052c7ba051.jpg.avif",
		"https://img14.360buyimg.com/n0/jfs/t1/130076/24/37795/158525/64c1eb3cF599ce766/f845e6d058a3373c.jpg.avif"
	]);
	let ReplyContent=ref("");
	let replyArr=reactive<Object>([
		{
			"headimg":"https://img14.360buyimg.com/n0/jfs/t1/130076/24/37795/158525/64c1eb3cF599ce766/f845e6d058a3373c.jpg.avif",
			"username":"绝绝***子",
			"date":"2023-10-11 20:10:53",
			"replyText":"非常好鸭！！！",
		},
		{
			"headimg":"https://img13.360buyimg.com/n1/jfs/t1/75605/23/24807/101847/64489322F2d4851b5/08e043052c7ba051.jpg.avif",
			"username":"菜菜***子",
			"date":"2023-09-08 09:10:53",
			"replyText":"努力鸭！！！",
		}
	]);	
	const sendRely=function(){
		if(/\S/.test(ReplyContent.value)===false){
			uni.$tools.toast("请输入评论内容");
			return;
		}
		uni.$tools.toast("发送: "+ReplyContent.value);
		let obj={};
		obj.headimg="https://img13.360buyimg.com/n1/jfs/t1/75605/23/24807/101847/64489322F2d4851b5/08e043052c7ba051.jpg.avif";
		obj.username="溜溜***子";
		obj.date="2023-11-25 08:18:18";
		obj.replyText="冲鸭！第一鸭~" + ReplyContent.value;
		replyArr.unshift(obj);
		showReply.value=false;
		ReplyContent.value="";
	}
</script>

<style lang='scss' scoped>
	@import "shop_comment_reply.scss";
</style>